<template>
	<view class="container">
		<image class="tu" :src="image" mode=""></image>
		<!-- 个人信息 -->
		<view class="profile">
			<view class="dingbu">
				<button class="bu2" type="default" size="mini"><uni-icons class="star" type="star" size="18"
						color="white"></uni-icons>积分榜</button>
				<uni-icons class="search" type="search" size="25" color="white"></uni-icons>
				<uni-icons class="bars" type="bars" size="25" color="white"></uni-icons>
			</view>
			<view class="dibu">
				<view class="left">
					<image class="avatar" :src="image" />
				</view>
				<view class="z">
					<view class="zs">
						<text class="name">{{ planetName }}</text>
					</view>
					<view class="zx">
						
					</view>
				</view>
			</view>
		</view>
		<!-- <naoZhong></naoZhong> -->
		<view class="body">
			<view class="card">
				<id-card class="card"></id-card>
			</view>
			<view class="naozhong">
				<naozhong></naozhong>
			</view>
			<!-- 动态列表 -->
			<view class="type-list">
				<view class="type" v-for="(item,index) in dynamics" key="index">
					<view
						style="height: 50rpx;width: 150rpx;display: flex;justify-content: end;align-items: center;flex-direction: column;"
						:data-type="index" @click="onClick">
						{{item}}
					</view>
					<view style="height: 10rpx;width: 150rpx;background-color: #ffae6c;border-radius: 5rpx;"
						v-show="index == type"></view>
				</view>

			</view>

			<!-- 用户发布信息内容 -->
			<scroll-view scroll-top="0" scroll-y="true" style="padding-bottom: 50rpx;">

				<view class="speak" v-for="item in postList" key="item">
					<!-- 上方区域 -->
					<view style="display: flex;height: 100rpx;">
						<!-- s_h是头像区域 -->
						<view class="s_h">
							<view style="display: flex;justify-content: center;align-items: center;border-radius:50%;overflow: hidden;
									width: 70rpx;height: 70rpx;position: absolute;">
								<image style="height: 70rpx;position: absolute;" mode="heightFix" :src="item.avatar">
								</image>
							</view>
						</view>
						<view style="width: 400rpx;height: 100rpx;padding-left: 10rpx;">
							<view style="font-size: 30rpx;height: 50rpx;display: flex;
										flex-direction: column;justify-content: end;font-weight: 600;font-family: cursive;">
								<view style="height: 70rpx;display: flex;flex-direction: column;justify-content: end;">
									<view style="display: flex;">
										<view class="an">{{item.nickName}}</view>
										<uni-tag text="星主" type="warning" size="mini"
											style="font-family:'Gill Sans', 'Gill Sans MT', Calibri, 'Trebuchet MS', sans-serif;"
											v-if="item.isPlanetMaster==1" />
										<uni-tag text="成员" type="success" size="mini"
											style="font-family:'Gill Sans', 'Gill Sans MT', Calibri, 'Trebuchet MS', sans-serif;"
											v-else />
									</view>
								</view>
							</view>
							<view style="font-size:5rpx;height: 50rpx;font-weight: 200;">{{item.createTime}}
							</view>
						</view>
					</view>

					<!-- 内容 -->
					<view class="content" @click="toContent">
						<!-- {{item.text}} -->
						<text style="font-weight: normal !important;">{{item.text}}</text>
						<!-- 用于展示图片 -->
						<view class="ivShow">
							<image :src="'http://118.24.29.136:9000/pic/'+item"
								style="height: 120rpx;margin: 20rpx 20rpx 20rpx 0;border-radius: 10rpx;border: 0.1rpx solid #e3e3e3;" mode="heightFix"
								v-for="item in item.filePic"></image>

						</view>



						<!-- 用于展示视频 -->
						<view class="ivShow">

						</view>
					</view>

					<!-- 底部分享栏 -->
					<view class="share">
						<view class="s_i"><uni-icons type="heart" size="20"></uni-icons></view>
						<view class="s_i" hover-class="s_j" @click="reply" :data-postid="item.id"
							:data-userId="item.userId"><uni-icons type="chatbubble" size="22"></uni-icons></view>
						<view class="s_i"><uni-icons type="undo" size="22"></uni-icons></view>
					</view>


					<!-- 评论回复区 -->
					<view class="pl">
						<view v-for="item in item.children"
							style="width: 90%;font-size: 20rpx;line-height: 45rpx;background-color: #f3f3f3;padding-left: 10rpx;">
							<view v-if="item.parentId==null" @click="replyUser(item)"><text
									class="tx">{{item.nickName}}</text>:
								{{item.commentContent}}
							</view>
							<view v-else><text class="tx">{{item.nickName}}</text><text
									style="margin: 0 5rpx 0 5rpx;">回复</text>
								<text class="tx">{{item.replyUserName}}</text> : {{item.commentContent}}
							</view>
						</view>
					</view>


				</view>
			</scroll-view>

		</view>

		<!-- 用于发布 -->
		<view class="add" hover-class="ade" @click="toAdd">
			<uni-icons type="plusempty" size="30" color="#fff"></uni-icons>
		</view>



		<view>
			<!-- 输入框示例 -->
			<uni-popup ref="inputDialog" type="center">
				<view class="pp">
					<view
						style="width: 700rpx;height: 100rpx;background-color: aquamarine;display: flex;justify-content: center;align-items: center;font-weight: 700;">
						评论</view>
					<view style="width: 600rpx;height: 300rpx;background-color: #ffffff;padding: 10rpx ;">
						<textarea @input="t" auto-height placeholder="请输入你的评论" />
					</view>
					<view style="width: 600rpx;height: 100rpx;display: flex;border-top:#dadada 0.5rpx solid ;">
						<view class="ti" style="border-right: #dadada 0.5rpx solid" @click="close" hover-class="tj">取消
						</view>
						<view class="ti" hover-class="tj" @click="sumbit">确定</view>
					</view>
				</view>
			</uni-popup>
		</view>
	</view>



</template>

<script>
	import naoZhong from "@/components/naozhong/naozhong.vue"
	import itemCard from "@/components/item-card/item-card.vue"
	import request from '@/common/request.js'
	import {
		callWithErrorHandling
	} from "vue";
	export default {
		components: {
			naoZhong,
			itemCard
		},
		data() {
			return {
				type: 0,
				postList: [], //帖子列表
				userName: 'nolusir',
				bio: '说点什么吧',
				id: '',
				current: 0,
				swiperCurrent: 0,
				image: '',
				planetName:null,
				dynamics: ['最新', '只看星主', '图片', '视频'],
				// 添加更多
				imagePath: null,
				//回复评论的id
				replyId: null,
				content: null, //回复的评论内容
				parentId: null, //是否是回复的他人的评论,
				replyUserId: null, //回复他人id，没有就为空
			};
		},
		methods: {
			animationfinish(e) {

				this.postList = []
				this.checkType(e.detail.current)
			},
			onClick(e) {
				this.type = e.currentTarget.dataset.type
				this.checkType(this.type)
			},

			checkType(type) {
				console.log(type);
				uni.showLoading({
					title: '加载中'
				});
				const data = {
					planetId: this.id,
					topicId: type
				}
				request('/user/getPost', data, 'GET').then((res) => {
					console.log(res);
					for (const index in res.data)
						if (res.data[index].filePic != null && res.data[index].filePic.length != 0) {
							res.data[index].filePic = JSON.parse(res.data[index].filePic)
						} else {
							res.data[index].filePic = null
						}
					this.postList = res.data
					uni.hideLoading();
				})
			},
			// 去往发表页面
			toAdd() {
				uni.navigateTo({
					url: '/pages/View/newArticle/newArticle?plantId=' + this.id + '&img=' + this.image
				})
			},
			// 去往详情页面
			toContent() {
				// 注意，要加id来索引下一个页面onload函数发送请求
				uni.navigateTo({
					url: '/pages/View/planet/content'
				})
			},


			// 回复帖子下评论页面
			replyUser(e) {
				console.log(e);
				this.replyId = e.postId
				this.parentId = 1
				this.replyUserId = e.userInfoId
				this.$refs.inputDialog.open()
			},


			// 回复
			reply(e) {
				console.log(e);
				this.replyId = e.currentTarget.dataset.postid
				this.replyUserId = e.currentTarget.dataset.userid
				this.$refs.inputDialog.open()
			},
			// 回复输入框
			t(e) {
				this.content = e.target.value
			},

			//回复评论
			sumbit() {
				const commentVO = {
					commentContent: this.content,
					parentId: this.parentId,
					planetId: this.id * 1,
					postId: this.replyId,
					replyUserId: this.replyUserId,
					topicId: this.type,
					type: 1
				}
				request('/comment/user/save', commentVO, 'POST').then((res) => {
					this.checkType(this.type)
					this.$refs.inputDialog.close()
					this.parentId = null
				})
			},
			close() {
				this.$refs.inputDialog.close()
				this.content = null
			},



			// 页面初始化
			init() {
				uni.showLoading({
					title: '加载中'
				});
				const data = {
					planetId: this.id,
					topicId: 0
				}
				request('/user/getPost', data, 'GET').then((res) => {
					var i = 0

					for (const index in res.data)
						if (res.data[index].filePic != null && res.data[index].filePic.length != 0) {
							res.data[index].filePic = JSON.parse(res.data[index].filePic)
						} else {
							res.data[index].filePic = null
						}
					this.postList = res.data
					uni.hideLoading();
				})
			}
		},
		onLoad(option) {
			console.log(option);
			this.id = option.id
			this.image = option.image
			this.planetName=option.planetName
			this.init()
		},
		onShow() {
			this.init()
		}
	};
</script>

<style scoped>
	.container {
		/* padding: 20rpx; */
		/* margin-top: 10rpx; */

		background-color: #ffffff;
		position: relative;
	}

	.tu {
		-webkit-filter: blur(5px);
		filter: blur(15px);
		width: 100%;
		border-radius: 10%;
		height: 430rpx;
		position: absolute;
		z-index: 1;
	}

	.profile {
		/* position:absolute; */
		width: 100%;
		display: flex;
		flex-direction: column;
		align-items: center;
		position: absolute;
		z-index: 2;
		/* background: linear-gradient(to bottom right,#2B3652,#756F95); */
	}

	.dingbu {
		width: 50%;
		height: 10%;
		/* background-color: aqua; */
		margin-left: 50%;
		margin-top: 15%;
		display: flex;
	}

	.search {
		margin-left: 0;
	}

	.bars {
		margin-left: 10%;
	}

	.star {
		line-height: 30rpx;
	}

	.bu2 {
		width: 140rpx;
		font-size: 1vmin;
		background: rgba(0, 0, 0, 0);
		border: 1px solid gray;
		border-radius: 50rpx;
		color: white;
		line-height: 40rpx;
		vertical-align: middle;
		margin-left: 20%;
	}

	.dibu {
		display: flex;
		width: 100%;
		/* background-color: beige; */
		/* height: 50%; */
		margin-top: 20%;
	}

	.avatar {
		width: 100rpx;
		height: 100rpx;
		border-radius: 10%;
		/* margin-top: 240%; */
		margin-left: 30%;
		/* background-color: aqua; */
	}

	.z {
		width: 40%;
		height: 20%;
		/* margin-top: 3%; */
		margin-left: 7%;
		display: flex;
		flex-direction: column;
		/* background-color: #2B3652; */
	}

	/* .zs{
	background-color: aliceblue;
} */
	.zx {
		height: 20%;
		width: 100%;
		/* background-color: aqua; */
		display: flex;
		margin-top: 3%;
	}

	.name {
		color: white;

	}

	.bu1 {
		width: 140rpx;
		font-size: 16rpx;
		/* height: 50rpx; */
		background: rgba(0, 0, 0, 0);
		border: 1px solid gray;
		border-radius: 50rpx;
		color: white;
		/* margin-top: 5%; */
		margin-left: 5%;
		line-height: 50rpx;
		/* background-color: aqua; */
	}

	.li {
		width: 50rpx;
		height: 50rpx;
		border-radius: 50%;
		/* margin-top: 20rpx; */
	}

	.bio {
		/* line-height: 200%; */
		font-size: 14rpx;
		color: #cccccc;
		/* background-color: #2B3652; */
		/* margin-right: 35%; */
	}

	.dynamic-item {
		display: flex;
		align-items: center;
		margin-bottom: 20rpx;
	}

	.dynamic-image {
		width: 80rpx;
		height: 80rpx;
		margin-right: 10rpx;
	}

	.dynamic-content {
		font-size: 16rpx;
	}

	.card {
		margin-top: 55%;
	}

	.body {
		height: 60%;
		border-radius: 15rpx;
		background-color: #FFFFFF;
		padding-top: 30rpx;
	}

	.naozhong {
		width: 90%;
		height: 120rpx;
		margin-left: 38rpx;
		margin-top: 30rpx;
	}

	.sw {
		width: 100%;
		height: 80vh;
		flex-grow: 1;
		background-color: #FFFFFF;
	}



	.dynamic-list {
		&active {}
	}

	.add {
		position: fixed;
		bottom: 100rpx;
		right: 50rpx;
		height: 80rpx;
		width: 80rpx;
		border-radius: 50%;
		background-color: aquamarine;
		box-shadow: 10px 5px 5px #c1c1c1;
		display: flex;
		justify-content: center;
		align-items: center;
	}

	.ade {
		position: fixed;
		bottom: 100rpx;
		right: 50rpx;
		height: 80rpx;
		width: 80rpx;
		border-radius: 50%;
		background-color: #c3dad5;
		box-shadow: 10px 5px 5px #c1c1c1;
	}


	.speak {
		width: 87%;
		/* height: 350rpx; */
		/* 		background-color: aqua; */
		margin: 50rpx;
		border-bottom: 0.5rpx #bfbfbf solid;
		border-right: 0.1rpx #bfbfbf solid;
		display: flex;
		flex-wrap: wrap;
		box-shadow: 5px 5px 2px 1px rgba(156, 156, 156, 0.4);
	}

	.s_h {
		height: 100rpx;
		width: 100rpx;
		display: flex;
		justify-content: center;
		align-items: center;
	}

	.text {
		display: flex;
		align-items: center;
	}

	/* 用户发表内容 */
	.content {
		width: 100%;
		/* 		height: 300rpx; */
		/* 		background-color: aquamarine; */
		font-size: 28rpx;
		font-weight: 100;
		padding: 20rpx 50rpx 10rpx 40rpx;

	}

	.share {
		width: 100%;
		display: flex;
		justify-content: space-between;
		align-items: center;
	}

	.s_i {
		width: 20%;
		height: 100rpx;
		display: flex;
		justify-content: center;
		align-items: center;
	}

	.s_j {
		width: 20%;
		height: 100rpx;
		display: flex;
		justify-content: center;
		align-items: center;
		background-color: #d6d6d6;
	}

	.ivShow {
		width: 100%;
		display: flex;
		flex-wrap: wrap;
	}



	.pl {
		width: 100%;
		padding: 20rpx 5% 20rpx 5%;
		display: flex;
		flex-direction: column;
	}


	.tx {
		font-size: 20rpx;
		color: #ff9650;

	}

	.an {
		margin-right: 10rpx;
		width: 200rpx;
		text-overflow: ellipsis;
		overflow: hidden;
		white-space: nowrap;
	}

	.type {
		width: 180rpx;
		height: 70rpx;
		display: flex;
		flex-direction: column;
		justify-content: center;
		align-items: center;
	}

	.type-list {
		width: 100%;
		height: 100rpx;
		display: flex;
	}

	.pp {
		width: 600rpx;
		height: 500rpx;
		background-color: white;
		border-radius: 10rpx;
		display: flex;
		justify-content: center;
		overflow: hidden;
		flex-wrap: wrap;
		box-shadow: 10px 5px 5px #424242;
	}

	.ti {
		width: 300rpx;
		height: 100rpx;
		display: flex;
		justify-content: center;
		align-items: center;
		font-weight: 650;
	}

	.tj {
		width: 300rpx;
		height: 100rpx;
		display: flex;
		justify-content: center;
		align-items: center;
		font-weight: 650;
		background-color: #c6c6c6;
	}
</style>